<script>
	function start(data) {
		var status = {
			"round": 0,
			"pos1": 0,
			"pos2": 0
		};
		round(data, status);
	}

	function round(data, status) {
		var actions = ["石头", "剪刀", "布"];
		var score = [10, 2, 5];
		if (status.round < data.round) {
			++status.round;
			var act1 = data.act1[status.round];
			var act2 = data.act2[status.round];
			if (act1 == act2) {
				++status.pos1;
				++status.pos2;
			}
			else if (act1 == act2 % 3 + 1) {
				status.pos2 += score[act2 - 1]
			}
			else {
				status.pos1 += score[act1 - 1]
			}
			status.pos1 %= 100;
			status.pos2 %= 100;
			$("#rect1").attr("y", 76 - status.pos1 / 99 * 76);
			$("#rect2").attr("y", 76 - status.pos2 / 99 * 76);
			$("#score1").text(status.pos1);
			$("#score2").text(status.pos2);
			$("#round").text(status.round);
			setTimeout(function () {
				round(data, status);
			}, 400);
		}
	}
</script>

<div class="row">
	<div class="col-md-5">
		<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin meet">
			<line x1="50" y1="0" x2="50" y2="80" stroke="black"/>
			<rect id="rect1" x="40" y="76" height="4" width="20" fill="black"/>
			<text id="score1" x="50" y="94" font-size="12px" text-anchor="middle" fill="black">0</text>
		</svg>
	</div>
	<div class="col-md-2">
		<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
			<text id="round" x="50" y="50" font-size="12px" text-anchor="middle" fill="black">0</text>
		</svg>
	</div>
	<div class="col-md-5">
		<svg height="100%" width="100%" viewBox="0 0 100 100">
			<line x1="50" y1="0" x2="50" y2="80" stroke="black"/>
			<rect id="rect2" x="40" y="76" height="4" width="20" fill="black"/>
			<text id="score2" x="50" y="94" font-size="12px" text-anchor="middle" fill="black">0</text>
		</svg>
	</div>
</div>